<template>
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <button @click="shuffle">Shuffle</button>

  <hr />

  <TransitionGroup tag="ul">
    <li v-for="item in list" :key="item">{{ item }}</li>
  </TransitionGroup>
</template>

<script setup>
import { ref } from 'vue'
const list = ref([1, 2, 3, 4, 5])
let next = 6

const add = () => {
  const randomIndex = Math.floor(Math.random() * list.value.length)
  list.value.splice(randomIndex, 0, next++)
}

const remove = () => {
  if (list.value.length === 0) return
  const randomIndex = Math.floor(Math.random() * list.value.length)
  list.value.splice(randomIndex, 1)
}

const shuffle = () => {
  if (list.value.length <= 1) return
  list.value.forEach((item, i) => {
    const randomIndex = Math.floor(Math.random() * list.value.length)
    list.value[i] = list.value[randomIndex]
    list.value[randomIndex] = item
  })
}
</script>

<style scoped>
:global(body) {
  overflow-x: hidden;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateX(50px);
}

.v-move,
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease, transform 0.8s ease;
}

.v-leave-active {
  position: absolute;
}
</style>
